<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>宠物网首页</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--头部-->
    <div id="header" ></div>
    <!--导航-->
    <div id="nav">
        <ul>
            <li><a href="#" class="select">home</a></li>
            <li><a href="#">aboutus</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">contact</a></li>

        </ul>
    </div>

    <!--列表-->
    <div id="list">
        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>

        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>
        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>

        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>

        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>
        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>   <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>

        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>
        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>   <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>

        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>
        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>   <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>

        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>
        <!--宠物-->
        <div class="dom">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">readmore</a>
        </div>
    </div>


    <!--尾部-->
    <div id="footer">
        <h2>contact us</h2>

        <ul>
            <li><img src="images/fb.png"></li>
            <li><img src="images/g+.png"></li>
            <li><img src="images/rss.png"></li>
            <li><img src="images/tw.png"></li>

        </ul>

    </div>


</body>
</html>